
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
     
    <html xmlns="http://www.w3.org/1999/xhtml">
    
<head>   
   

    <script type="text/javascript" src="http://c.csdnimg.cn/pubfooter/js/tracking.js" charset="utf-8"></script>  

    <script type="text/javascript">
        var protocol = window.location.protocol;
        document.write('<script type="text/javascript" src="' + protocol + '//csdnimg.cn/pubfooter/js/repoAddr2.js?v=' + Math.random() + '"></' + 'script>');
    </script>

  
 <meta http-equiv="Cache-Control" content="no-siteapp" /><link rel="alternate" media="handheld" href="#" />

    <title>一站式分页解决方案:后台分页PageHelper使用,页面分页,异步ajax分页pageutils.js - noteless的博客
        - 博客频道 - CSDN.NET</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="description" content="IIC总线一般串行数据通讯都有时钟和数据之分,有异步和同步之别.有单线,双线和三线等.I2C肯定是2线的(不算地线).I2C协议确实很科学,比3/4线的SPI要好,当然线多通讯速率相对就快了.I2C的原则是:在SCL=1(高电平)时,SDA千万别忽悠!!!否则,SDA下跳则判罚为起始信号S,SDA上跳则判罚为停止信号P.在SCL=0(低电平)时,SDA随便忽悠!!!(可别忽悠过火到SCL跳高)每个字节后应该由对方回送一个应答信号ACK做为对方在线的标志.非应答信号一般在所有字节的最后一个字节" />
    <script src="http://static.blog.csdn.net/scripts/jquery.js" type="text/javascript"></script>
      <script type="text/javascript" src="http://static.blog.csdn.net/scripts/jquery-version.js"></script>
    <script type="text/javascript" src="http://static.blog.csdn.net/scripts/ad.js?v=1.1"></script>
        <!--new top-->
               <link rel="stylesheet" href="http://c.csdnimg.cn/public/common/toolbar/css/index.css">        <!--new top-->
    
      <!-- ad begin -->
         <script language="javascript" type="text/javascript" src="http://ads.csdn.net/js/tracking.js"></script>
    <!-- ad end-->

    <link rel="Stylesheet" type="text/css" href="http://static.blog.csdn.net/skin/skin-yellow/css/style.css?v=1.1" />
    <link id="RSSLink" title="RSS" type="application/rss+xml" rel="alternate" href="/noteless/rss/list" />
    <link rel="shortcut icon" href="http://c.csdnimg.cn/public/favicon.ico" />
    <link type="text/css" rel="stylesheet" href="http://static.blog.csdn.net/scripts/SyntaxHighlighter/styles/default.css" />
 


<script>
    var _hmt = _hmt || [];
    (function () {
        var hm = document.createElement("script");
        hm.src = "//hm.baidu.com/hm.js?6bcd52f51e9b3dce32bec4a3997715ac";
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
    })();
</script>

</head>
<body>
    <!-- 广告位开始 -->
        <ins data-revive-zoneid="149" data-revive-id="8c38e720de1c90a6f6ff52f3f89c4d57"></ins>
    <!-- 广告位结束 -->

    
   
      <!--new top-->
    <script id="toolbar-tpl-scriptId" fixed="true" prod="blog" skin="black" src="http://c.csdnimg.cn/public/common/toolbar/js/html.js" type="text/javascript"></script>
     <!--new top-->
    <div id="container">
        <div id="header">
    <div class="header">
        <div id="blog_title">
            <h2>
                <a href="http://blog.csdn.net/noteless">noteless的博客</a></h2>
            <h3></h3>
            <div class="clear">
            </div>
        </div>
        <div class="clear">
        </div>
        
     
    </div>
</div>
<div id="navigator">
    <div class="navigator_bg">
    </div>
    <div class="navigator">
        <ul>           
                <li id="btnContents"><a href="http://blog.csdn.net/noteless?viewmode=contents"><span onclick="_gaq.push(['_trackEvent','function', 'onclick', 'blog_articles_mulu'])">
                    <img src="http://static.blog.csdn.net/images/ico_list.gif">目录视图</span></a></li>
                <li id="btnView"><a href="http://blog.csdn.net/noteless?viewmode=list"><span onclick="_gaq.push(['_trackEvent','function', 'onclick', 'blog_articles_zhaiyao'])">
                    <img src="http://static.blog.csdn.net/images/ico_summary.gif">摘要视图</span></a></li>
                <li id="btnRss"><a href="http://blog.csdn.net/noteless/rss/list"><span onclick="_gaq.push(['_trackEvent','function', 'onclick', 'blog_articles_RSS'])">
                    <img src="http://static.blog.csdn.net/images/ico_rss.gif">订阅</span></a></li>                
            

            </ul>
    </div>
</div>
<script type="text/javascript">
    var username = "noteless";
    var _blogger = username;
    var blog_address = "http://blog.csdn.net/noteless";
    var static_host = "http://static.blog.csdn.net";
    var currentUserName = "";  
</script>

        <div id="body">
            <div id="main">
                <div class="main">
                        <div class="ad_class">
<div class="notice tracking-ad" data-mod='popu_3' > 

<a href="http://blog.csdn.net/turingbooks/article/details/53606998">
<font color=red>程序员12月书讯，写书评领书啦~
</font></a>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;


<a href="http://e.cn.miaozhen.com/r/k=6002004&p=4b1&ctid=2&rt=2&ns=__IP__&ni=__IESID__&v=__LOC__&vo=3b56fd611&vr=2&o=http%3A%2F%2Fwww.ibm.com%2Fdeveloperworks%2Fcn%2Fmobile%2Fzones%2F10-steps-to-running-a-swift-app-in-an-ibm-container%2Findex.html%3Fcm_mmc%3Ddwchina-_-homepage-_-csdn-_-learn
">
<font color=blue>在 IBM Container 中运行 Swift 应用程序的 10 个 步骤 
</font></a>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

<a href="http://edu.csdn.net/huiyiCourse/detail/257">
<font color=red>Python数据分析与挖掘经典案例实战
</font></a>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

<a href="http://lib.csdn.net/">
<font color=blue>免费的知识库，你的知识库
</font></a>

</div>                        </div>
                        


<!-- 广告位开始 -->
<ins data-revive-zoneid="72" data-revive-id="8c38e720de1c90a6f6ff52f3f89c4d57"></ins>
<!-- 广告位结束 -->

  
<link href="http://static.blog.csdn.net/css/comment1.css" type="text/css" rel="stylesheet" />
<link href="http://static.blog.csdn.net/css/style1.css" type="text/css" rel="stylesheet" />
<script language='JavaScript' type='text/javascript' src='http://download.csdn.net/js/jquery.cookie.js'></script>
<script type="text/javascript" src="http://c.csdnimg.cn/rabbit/search-service/main.js"></script>
<link rel="stylesheet" href="http://static.blog.csdn.net/public/res-min/markdown_views.css?v=1.0" />
<link rel="stylesheet" href="http://static.blog.csdn.net/css/category.css?v=1.0" />
<script type="text/javascript" src="http://static.blog.csdn.net/public/res/bower-libs/MathJax/MathJax.js?config=TeX-AMS_HTML"></script>
<script type="text/javascript" src="http://static.blog.csdn.net/scripts/web-storage-cache.min.js"></script>
<script type="text/javascript" src="http://static.blog.csdn.net/scripts/replace.min.js"></script>




  <script type="text/ecmascript">
      window.quickReplyflag = true;
           
            var isBole = false;
            
          
    </script>
<div id="article_details" class="details">
    <div class="article_title">   
         <span class="ico ico_type_Original"></span>


    <h1>
        <span class="link_title"><a href="/noteless/article/details/50176273">
        一站式分页解决方案:后台分页PageHelper使用,页面分页,异步ajax分页pageutils.js            
        </a></span>
    </h1>
</div>

   

        <div class="article_manage clearfix">
        <div class="article_l">
            <span class="link_categories">
            标签：
              <a href='http://www.csdn.net/tag/ajax%e5%bc%82%e6%ad%a5%e5%88%86%e9%a1%b5' target=_blank onclick="_gaq.push(['_trackEvent','function', 'onclick', 'blog_articles_tag']);">ajax异步分页</a><a href='http://www.csdn.net/tag/%e5%88%86%e9%a1%b5' target=_blank onclick="_gaq.push(['_trackEvent','function', 'onclick', 'blog_articles_tag']);">分页</a><a href='http://www.csdn.net/tag/java%e5%90%8e%e5%8f%b0%e5%88%86%e9%a1%b5' target=_blank onclick="_gaq.push(['_trackEvent','function', 'onclick', 'blog_articles_tag']);">java后台分页</a><a href='http://www.csdn.net/tag/pagehelper%e4%bd%bf%e7%94%a8' target=_blank onclick="_gaq.push(['_trackEvent','function', 'onclick', 'blog_articles_tag']);">pagehelper使用</a>
            </span>
        </div>
        <div class="article_r">
            <span class="link_postdate">2015-12-04 16:02</span>
            <span class="link_view" title="阅读次数">412人阅读</span>
            <span class="link_comments" title="评论次数"> <a href="#comments" onclick="_gaq.push(['_trackEvent','function', 'onclick', 'blog_articles_pinglun'])">评论</a>(0)</span>
            <span class="link_collect tracking-ad" data-mod="popu_171"> <a href="javascript:void(0);" onclick="javascript:collectArticle('一站式分页解决方案:后台分页PageHelper使用,页面分页,异步ajax分页pageutils.js','50176273');return false;" title="收藏">收藏</a></span>
             <span class="link_report"> <a href="#report" onclick="javascript:report(50176273,2);return false;" title="举报">举报</a></span>

        </div>
    </div>
    <div class="embody"  style="display:none" id="embody">
        <span class="embody_t">本文章已收录于：</span>
        <div class="embody_c" id="lib" value="{&quot;err&quot;:0,&quot;msg&quot;:&quot;ok&quot;,&quot;data&quot;:[]}"></div>
    </div>
    <style type="text/css">        
            .embody{
                padding:10px 10px 10px;
                margin:0 -20px;
                border-bottom:solid 1px #ededed;                
            }
            .embody_b{
                margin:0 ;
                padding:10px 0;
            }
            .embody .embody_t,.embody .embody_c{
                display: inline-block;
                margin-right:10px;
            }
            .embody_t{
                font-size: 12px;
                color:#999;
            }
            .embody_c{
                font-size: 12px;
            }
            .embody_c img,.embody_c em{
                display: inline-block;
                vertical-align: middle;               
            }
             .embody_c img{               
                width:30px;
                height:30px;
            }
            .embody_c em{
                margin: 0 20px 0 10px;
                color:#333;
                font-style: normal;
            }
    </style>
    <script  type="text/javascript">
        $(function () {
            try
            {
                var lib = eval("("+$("#lib").attr("value")+")");
                var html = "";
                if (lib.err == 0) {
                    $.each(lib.data, function (i) {
                        var obj = lib.data[i];
                        //html += '<img src="' + obj.logo + '"/>' + obj.name + "&nbsp;&nbsp;";
                        html += ' <a href="' + obj.url + '" target="_blank">';
                        html += ' <img src="' + obj.logo + '">';
                        html += ' <em><b>' + obj.name + '</b></em>';
                        html += ' </a>';
                    });
                    if (html != "") {
                        setTimeout(function () {
                            $("#lib").html(html);                      
                            $("#embody").show();
                        }, 100);
                    }
                }      
            } catch (err)
            { }
            
        });
    </script>
      <div class="category clearfix">
        <div class="category_l">
           <img src="http://static.blog.csdn.net/images/category_icon.jpg">
            <span>分类：</span>
        </div>
        <div class="category_r">
                    <label  onclick="GetCategoryArticles('5997821','noteless','top','50176273');">
                        <span onclick="_gaq.push(['_trackEvent','function', 'onclick', 'blog_articles_fenlei']);">mybatis<em>（1）</em></span>
                      <img class="arrow-down" src="http://static.blog.csdn.net/images/arrow_triangle _down.jpg" style="display:inline;">
                      <img class="arrow-up" src="http://static.blog.csdn.net/images/arrow_triangle_up.jpg" style="display:none;">
                        <div class="subItem">
                            <div class="subItem_t"><a  href="http://blog.csdn.net/noteless/article/category/5997821"  target="_blank">作者同类文章</a><i class="J_close">X</i></div>
                            <ul class="subItem_l" id="top_5997821">                            
                            </ul>
                        </div>
                    </label>                    
                    <label  onclick="GetCategoryArticles('5997827','noteless','top','50176273');">
                        <span onclick="_gaq.push(['_trackEvent','function', 'onclick', 'blog_articles_fenlei']);">js<em>（2）</em></span>
                      <img class="arrow-down" src="http://static.blog.csdn.net/images/arrow_triangle _down.jpg" style="display:inline;">
                      <img class="arrow-up" src="http://static.blog.csdn.net/images/arrow_triangle_up.jpg" style="display:none;">
                        <div class="subItem">
                            <div class="subItem_t"><a  href="http://blog.csdn.net/noteless/article/category/5997827"  target="_blank">作者同类文章</a><i class="J_close">X</i></div>
                            <ul class="subItem_l" id="top_5997827">                            
                            </ul>
                        </div>
                    </label>                    
                    <label  onclick="GetCategoryArticles('5997871','noteless','top','50176273');">
                        <span onclick="_gaq.push(['_trackEvent','function', 'onclick', 'blog_articles_fenlei']);">ajax<em>（2）</em></span>
                      <img class="arrow-down" src="http://static.blog.csdn.net/images/arrow_triangle _down.jpg" style="display:inline;">
                      <img class="arrow-up" src="http://static.blog.csdn.net/images/arrow_triangle_up.jpg" style="display:none;">
                        <div class="subItem">
                            <div class="subItem_t"><a  href="http://blog.csdn.net/noteless/article/category/5997871"  target="_blank">作者同类文章</a><i class="J_close">X</i></div>
                            <ul class="subItem_l" id="top_5997871">                            
                            </ul>
                        </div>
                    </label>                    
        </div>
    </div>
    <script   type="text/javascript" src="http://static.blog.csdn.net/scripts/category.js"></script>  
        <div   class="bog_copyright">         
            <p  class="copyright_p" >版权声明：本文为博主原创文章，未经博主允许不得转载。</p>
        </div>

  

  
  
     

<div id="article_content" class="article_content">

<p>之前做分页功能一直都没有找到一个比较合适的完整的方式,现整理下完整的流程.给大家展示一个完整的流程</p>
<p>项目:springMVC&#43;mybatis&#43;mysql</p>
<p>我们需要使用到的插件主要有:</p>
<h1 style="margin:0px 0px 10pt; padding:0px; font-family:Lato,'Helvetica Neue','Microsoft YaHei',Arial,Helvetica,sans-serif; background-color:rgb(250,250,250)">
<span style="font-size:14px">PageHelper:主要用于后台分页</span></h1>
<div><span style="font-size:14px"><strong>以及pageUtils.js脚本,用于前台分页</strong></span></div>
<div><span style="font-size:14px"><strong><br>
</strong></span></div>
<div>---------------------------------------------------------------------</div>
<div>首先说一下后台的分页,有关于pagehelper的使用以及源码,请自行百度,</div>
<div>https://github.com/pagehelper/Mybatis-PageHelper<br>
</div>
<div><br>
</div>
<div>pageUtils.js源码</div>
<div><pre name="code" class="javascript">/**
 * 
 * 
 * 调用：$(&quot;.nav.page&quot;).initPage(10,1,10); 或 $(&quot;.nav.page&quot;).initPage(10,1,10,targetForm); 
 * 
 * 备注：第一个参数是总页数，第二个参数是当前页数,第三个参数是每页条数,第四个参数是提交的目标form
 * 
 */
$.fn.extend({
	targetForm:null,
	totalPage : 0,
	_totalPage:0,
	_callback:null,
	_objPage:null,
	initPage : function(totalPage,currentPage,pageSize,targetForm) {
		var limitSize = 10;//最多展示10个分页的按钮显示
		var tips_html = $(this).html();
		if (totalPage == null || totalPage == undefined || totalPage == &quot;&quot; || totalPage==&quot;null&quot; || totalPage == 0) {
			$(this).html(&quot;暂无分页记录&quot;);
			if(tips_html!=&quot;&quot;){
				$(this).html(tips_html).css({&#39;float&#39;:&#39;none&#39;,&#39;text-align&#39;:&#39;center&#39;,&#39;height&#39;:&#39;auto&#39;});
			}
			return;
		}
		
		$.fn.totalPage = parseInt(totalPage);
		$.fn.targetForm = $(&quot;#&quot;+targetForm);
		
		if (currentPage == null || currentPage == undefined || currentPage == &quot;&quot; || currentPage == &quot;null&quot; || currentPage == 0) {
			$(this).html(&quot;暂无分页记录&quot;);
			if(tips_html!=&quot;&quot;){
				$(this).html(tips_html).css({&#39;float&#39;:&#39;none&#39;,&#39;text-align&#39;:&#39;center&#39;,&#39;height&#39;:&#39;auto&#39;});
			}
			return;
		}
		currentPage = parseInt(currentPage);
		
		if (pageSize == null || pageSize == undefined || pageSize == &quot;&quot; || pageSize == &quot;null&quot; || pageSize == 0){
			$(this).html(&quot;暂无分页记录&quot;);
			if(tips_html!=&quot;&quot;){
				$(this).html(tips_html).css({&#39;float&#39;:&#39;none&#39;,&#39;text-align&#39;:&#39;center&#39;,&#39;height&#39;:&#39;auto&#39;});
			}
			return;
		}
		pageSize = parseInt(pageSize);
		
		var pageHtml = &quot;每页&quot;+pageSize+&quot;条  ，共&quot;+totalPage+&quot;页  &quot;;
		/**
		 * 当前是第一页，上一页则是灰的
		 */
		if (currentPage &lt;= 1) {
			pageHtml += &#39;&lt;a class=&quot;no&quot; href=&quot;javascript:;&quot;&gt;上一页&lt;/a&gt;&#39;;
		} else {
			pageHtml += &#39;&lt;a href=&quot;javascript:$.fn.goPage(&#39;+(currentPage-1)+&#39;);&quot;&gt;上一页&lt;/a&gt;&#39;;
		}
		if (totalPage &lt;= limitSize) {
			for (var i = 1; i &lt;= totalPage; i++) {
				pageHtml += &#39;&lt;a &#39;;
				/** *选中当前页** */
				if (currentPage == i) {
					pageHtml += &#39; class=&quot;active&quot; &#39;;
				}
				pageHtml += &#39;  href=&quot;javascript:$.fn.goPage(&#39;+i+&#39;);&quot;&gt;&#39; + i + &#39;&lt;/a&gt;&#39;;
			}
		}else if(currentPage &lt;= limitSize / 2 + 1){
			for (var i = 1; i &lt;= limitSize; i++) {
				pageHtml += &#39;&lt;a &#39;;
				/** *选中当前页** */
				if (currentPage == i) {
					pageHtml += &#39; class=&quot;active&quot; &#39;;
				}
				pageHtml += &#39;  href=&quot;javascript:$.fn.goPage(&#39;+i+&#39;);&quot;&gt;&#39; + i + &#39;&lt;/a&gt;&#39;;
			}
		}else if(currentPage+limitSize / 2 &gt;totalPage){
			for (var i = totalPage-9; i &lt;= totalPage; i++) {
				pageHtml += &#39;&lt;a &#39;;
				/** *选中当前页** */
				if (currentPage == i) {
					pageHtml += &#39; class=&quot;active&quot; &#39;;
				}
				pageHtml += &#39;  href=&quot;javascript:$.fn.goPage(&#39;+i+&#39;);&quot;&gt;&#39; + i + &#39;&lt;/a&gt;&#39;;
			}
		}else if (currentPage &gt; limitSize / 2 + 1) {
			for (var i = currentPage - limitSize / 2; i &lt;= currentPage
					+ (limitSize / 2 - 1); i++) {
				pageHtml += &#39;&lt;a &#39;;
				/** *选中当前页** */
				if (currentPage == i) {
					pageHtml += &#39; class=&quot;active&quot; &#39;;
				}
				pageHtml += &#39;  href=&quot;javascript:$.fn.goPage(&#39;+i+&#39;);&quot;&gt;&#39; + i + &#39;&lt;/a&gt;&#39;;
			}
		}
		/**
		 * 当前是最后一页，下一页则是灰的
		 */
		if (currentPage == totalPage) {
			pageHtml += &#39;&lt;a class=&quot;no&quot; href=&quot;javascript:;&quot;&gt;下一页&lt;/a&gt;&#39;;
		} else {
			pageHtml += &#39;&lt;a href=&quot;javascript:$.fn.goPage(&#39;+(currentPage+1)+&#39;);&quot;&gt;下一页&lt;/a&gt;&#39;;
		}
		pageHtml += &#39; 转到：&lt;cite class=&quot;wsc-form-cite a text&quot;&gt;&lt;input type=&quot;text&quot; id=&quot;page&quot; name=&quot;page&quot; value=&quot;&quot; inited=&quot;true&quot; &gt;&lt;/cite&gt; 页&#39;;
		pageHtml += &#39;&lt;a href=&quot;javascript:;&quot; class=&quot;_jump_page_link&quot;&gt;确定&lt;/a&gt;&#39;;
		
		$(this).html(pageHtml);
		
		$(&quot;._jump_page_link&quot;).on(&quot;click&quot;,function(){
			//var _page = $(this).prev().val();
			var _page = $(&quot;#page&quot;).val();
			$.fn.goPage(_page);
		});
	},
	/**
	 * 跳转到第几页
	 */
	goPage:function(nextPage){
		if(!(/^\d+$/.test(nextPage)) || parseInt(nextPage)&lt;=0 || parseInt(nextPage)&gt;$.fn.totalPage){
			alert(&quot;非法的跳转页数&quot;);
			return;
		}
		if($.fn.targetForm.length){
			if($(&#39;[name=&quot;pageNum&quot;]&#39;).length==0){
				$(&quot;&lt;input type=&#39;hidden&#39; name=&#39;pageNum&#39; value=&#39;&quot;+nextPage+&quot;&#39; /&gt;&quot;).appendTo($.fn.targetForm);
			}else{
				$(&#39;[name=&quot;pageNum&quot;]&#39;).eq(0).attr(&quot;value&quot;,nextPage);
			}
			$.fn.targetForm.submit();
		}else{
			var _pageUrl = window.location.href;
			var params = _pageUrl.split(&quot;?&quot;);
			window.location.href = params[0]+&quot;?pageNum=&quot;+nextPage;
		}
	},
	/**
	 * ajax分页回调
	 */
	initAjaxPage : function(callback) {
		$.fn._callback = callback;
		$.fn._objPage = $(this);
		callback(1,$(this));
	},
	/**
	 * 渲染分页
	 */
	buildPage:function(pageNum,pageSize,total){
		var limitSize = 10;//最多展示10个分页的按钮显示
		var tips_html = $(this).html();
		if (total == null || total == undefined || total == &quot;&quot; || total==&quot;null&quot; || total == 0) {
			$(this).html(&quot;暂无分页记录&quot;);
			if(tips_html!=&quot;&quot;){
				$(this).html(tips_html).css({&#39;float&#39;:&#39;none&#39;,&#39;text-align&#39;:&#39;center&#39;,&#39;height&#39;:&#39;auto&#39;});
			}
			return;
		}
		
		$.fn._totalPage = parseInt(total);
		var totalPage = parseInt(total);
		
		if (pageNum == null || pageNum == undefined || pageNum == &quot;&quot; || pageNum == &quot;null&quot; || pageNum == 0) {
			$(this).html(&quot;暂无分页记录&quot;);
			if(tips_html!=&quot;&quot;){
				$(this).html(tips_html).css({&#39;float&#39;:&#39;none&#39;,&#39;text-align&#39;:&#39;center&#39;,&#39;height&#39;:&#39;auto&#39;});
			}
			return;
		}
		var currentPage = parseInt(pageNum);
		
		if (pageSize == null || pageSize == undefined || pageSize == &quot;&quot; || pageSize == &quot;null&quot; || pageSize == 0){
			$(this).html(&quot;暂无分页记录&quot;);
			if(tips_html!=&quot;&quot;){
				$(this).html(tips_html).css({&#39;float&#39;:&#39;none&#39;,&#39;text-align&#39;:&#39;center&#39;,&#39;height&#39;:&#39;auto&#39;});
			}
			return;
		}
		var pageSize = parseInt(pageSize);
		
		var pageHtml = &quot;每页&quot;+pageSize+&quot;条  ，共&quot;+total+&quot;页  &quot;;
		/**
		 * 当前是第一页，上一页则是灰的
		 */
		if (currentPage &lt;= 1) {
			pageHtml += &#39;&lt;a class=&quot;no&quot; href=&quot;javascript:;&quot;&gt;上一页&lt;/a&gt;&#39;;
		} else {
			pageHtml += &#39;&lt;a href=&quot;javascript:$.fn.goAjaxPage(&#39;+(currentPage-1)+&#39;);&quot;&gt;上一页&lt;/a&gt;&#39;;
		}
		if (totalPage &lt;= limitSize) {
			for (var i = 1; i &lt;= totalPage; i++) {
				pageHtml += &#39;&lt;a &#39;;
				/** *选中当前页** */
				if (currentPage == i) {
					pageHtml += &#39; class=&quot;active&quot; &#39;;
				}
				pageHtml += &#39;  href=&quot;javascript:$.fn.goAjaxPage(&#39;+i+&#39;);&quot;&gt;&#39; + i + &#39;&lt;/a&gt;&#39;;
			}
		}else if(currentPage &lt;= limitSize / 2 + 1){
			for (var i = 1; i &lt;= limitSize; i++) {
				pageHtml += &#39;&lt;a &#39;;
				/** *选中当前页** */
				if (currentPage == i) {
					pageHtml += &#39; class=&quot;active&quot; &#39;;
				}
				pageHtml += &#39;  href=&quot;javascript:$.fn.goAjaxPage(&#39;+i+&#39;);&quot;&gt;&#39; + i + &#39;&lt;/a&gt;&#39;;
			}
		}else if(currentPage+limitSize / 2 &gt;totalPage){
			for (var i = totalPage-9; i &lt;= totalPage; i++) {
				pageHtml += &#39;&lt;a &#39;;
				/** *选中当前页** */
				if (currentPage == i) {
					pageHtml += &#39; class=&quot;active&quot; &#39;;
				}
				pageHtml += &#39;  href=&quot;javascript:$.fn.goAjaxPage(&#39;+i+&#39;);&quot;&gt;&#39; + i + &#39;&lt;/a&gt;&#39;;
			}
		}else if (currentPage &gt; limitSize / 2 + 1) {
			for (var i = currentPage - limitSize / 2; i &lt;= currentPage
					+ (limitSize / 2 - 1); i++) {
				pageHtml += &#39;&lt;a &#39;;
				/** *选中当前页** */
				if (currentPage == i) {
					pageHtml += &#39; class=&quot;active&quot; &#39;;
				}
				pageHtml += &#39;  href=&quot;javascript:$.fn.goAjaxPage(&#39;+i+&#39;);&quot;&gt;&#39; + i + &#39;&lt;/a&gt;&#39;;
			}
		}
		/**
		 * 当前是最后一页，下一页则是灰的
		 */
		if (currentPage == totalPage) {
			pageHtml += &#39;&lt;a class=&quot;no&quot; href=&quot;javascript:;&quot;&gt;下一页&lt;/a&gt;&#39;;
		} else {
			pageHtml += &#39;&lt;a href=&quot;javascript:$.fn.goAjaxPage(&#39;+(currentPage+1)+&#39;);&quot;&gt;下一页&lt;/a&gt;&#39;;
		}
		pageHtml += &#39; 转到：&lt;input type=&quot;text&quot; name=&quot;page&quot; value=&quot;&quot; inited=&quot;true&quot;&gt; 页&#39;;
		pageHtml += &#39;&lt;a href=&quot;javascript:;&quot; class=&quot;_jump_page_link&quot;&gt;确定&lt;/a&gt;&#39;;
		
		$(this).html(pageHtml);
		$(&quot;._jump_page_link&quot;).on(&quot;click&quot;,function(){
			var _page = $(this).prev().val();
			$.fn.goAjaxPage(_page);
		});
		
	},
	/**
	 * 以ajax的方式跳转到第几页
	 */
	goAjaxPage:function(nextPage){
		if(!(/^\d+$/.test(nextPage)) || parseInt(nextPage)&lt;=0 || parseInt(nextPage)&gt;$.fn._totalPage){
			alert(&quot;非法的跳转页数&quot;);
			return;
		}
		$.fn._callback(parseInt(nextPage),$.fn._objPage);
	}
	
});</pre><br>
</div>
<br>
<div><br>
</div>
<div>使用pagehelper需要配置文件配置</div>
<div>(datasource是数据库连接的一些配置)</div>
<div><pre name="code" class="plain">&lt;!-- myBatis文件 --&gt;
	&lt;bean id=&quot;sqlSessionFactory&quot; class=&quot;org.mybatis.spring.SqlSessionFactoryBean&quot;&gt;
		&lt;property name=&quot;dataSource&quot; ref=&quot;dataSource&quot; /&gt;
		&lt;!-- 自动扫描映射文件 --&gt;
		&lt;property name=&quot;mapperLocations&quot;&gt;
			&lt;array&gt;
				&lt;value&gt;classpath:mapping/**/*.xml&lt;/value&gt;
			&lt;/array&gt;
		&lt;/property&gt;
		&lt;property name=&quot;plugins&quot;&gt;
			&lt;array&gt;
				&lt;bean class=&quot;com.github.pagehelper.PageHelper&quot;&gt;
					&lt;property name=&quot;properties&quot;&gt;
						&lt;value&gt;
							dialect=mysql
						&lt;/value&gt;
					&lt;/property&gt;
				&lt;/bean&gt;
			&lt;/array&gt;
		&lt;/property&gt;
	&lt;/bean&gt;</pre><br>
<br>
</div>
<div>也可以参考作者提供的mybatis配置文件实例,如下:</div>
<div><pre name="code" class="plain">&lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot; ?&gt;
&lt;!DOCTYPE configuration
    PUBLIC &quot;-//mybatis.org//DTD Config 3.0//EN&quot;
    &quot;http://mybatis.org/dtd/mybatis-3-config.dtd&quot;&gt;

&lt;configuration&gt;
  &lt;settings&gt;
    &lt;setting name=&quot;cacheEnabled&quot; value=&quot;true&quot;/&gt;
    &lt;setting name=&quot;lazyLoadingEnabled&quot; value=&quot;false&quot;/&gt;
    &lt;setting name=&quot;aggressiveLazyLoading&quot; value=&quot;true&quot;/&gt;
    &lt;setting name=&quot;logImpl&quot; value=&quot;LOG4J&quot;/&gt;
  &lt;/settings&gt;

  &lt;typeAliases&gt;
    &lt;package name=&quot;isea533.mybatis.model&quot;/&gt;
  &lt;/typeAliases&gt;

&lt;plugins&gt;
  &lt;plugin interceptor=&quot;com.github.pagehelper.PageHelper&quot;&gt;
    &lt;property name=&quot;dialect&quot; value=&quot;hsqldb&quot;/&gt;
    &lt;property name=&quot;pageSizeZero&quot; value=&quot;true&quot;/&gt;
    &lt;property name=&quot;reasonable&quot; value=&quot;true&quot;/&gt;
  &lt;/plugin&gt;
&lt;/plugins&gt;

	&lt;environments default=&quot;development&quot;&gt;
		&lt;environment id=&quot;development&quot;&gt;
			&lt;transactionManager type=&quot;JDBC&quot;&gt;
				&lt;property name=&quot;&quot; value=&quot;&quot; /&gt;
			&lt;/transactionManager&gt;
			&lt;dataSource type=&quot;UNPOOLED&quot;&gt;
				&lt;property name=&quot;driver&quot; value=&quot;org.hsqldb.jdbcDriver&quot; /&gt;
				&lt;property name=&quot;url&quot; value=&quot;jdbc:hsqldb:mem:basetest&quot; /&gt;
				&lt;property name=&quot;username&quot; value=&quot;sa&quot; /&gt;
			&lt;/dataSource&gt;
		&lt;/environment&gt;
	&lt;/environments&gt;

	&lt;mappers&gt;
		&lt;mapper resource=&quot;mapper/CountryMapper.xml&quot; /&gt;
	&lt;/mappers&gt;

&lt;/configuration</pre><br>
<br>
</div>
<div><br>
</div>
<div><br>
</div>
<div>在确保项目的确可以正确引入pagehelper插件,以及js文件之后,我们开始整体的介绍</div>
<div><br>
</div>
<div>后台的分页使用:</div>
<div>只需要在调用前执行startPage方法,他会处理紧接下来的第一条执行sql语句的方法</div>
<div>说白了,就是不管是mapper接口还是service方法,只要他是执行sql功能的方法,紧跟着startPage就可以实现分页(其实就是执行sql语句的拦截时候加了一个limit用以返回结果)</div>
<div><br>
</div>
<div><span style="white-space:pre"></span>PageHelper.startPage(pageNum, Constant.PAGE_FIVE_NUM);<br>
<span style="white-space:pre"></span>courseList =courseService.selectParticCourse(courseEntity);<br>
<span style="white-space:pre"></span>PageInfo&lt;CourseEntity&gt; participantCoursePageInfo = new PageInfo&lt;CourseEntity&gt;(courseList);<br>
</div>
<div><br>
</div>
<div>pageInfo可以用来封装页面的信息,页面大小,每页个数</div>
<div><br>
</div>
<div><br>
</div>
<div>只需要把list以及pageInfo信息发送到页面即可</div>
<div><br>
</div>
<div>后台的分页已经搞定了,只要配置好,使用起来很简单.</div>
<div><br>
</div>
<div><span style="font-size:18px">此时,你应该已经确保java后台可以正确获取到你查询到的列表了,接下来看页面的操作</span></div>
<div><br>
</div>
<div>1,如果是单页面的分页,就是不需要异步加载的</div>
<div>你需要引入js也就是上面那一段,直接copy即可使用,无需修改</div>
<div>而且,你的页面应该有有关分页信息的div,如:</div>
<div><br>
</div>
<div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;!--分页--&gt;<br>
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class=&quot;nav page text align-right margin-top-25 &nbsp;margin-bottom-30&quot;&gt;<br>
<br>
<br>
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;<br>
</div>
<div>没有请自行添加</div>
<div>同时你还需要一个空的div用于存放生成的拼接后的html</div>
<div>&nbsp; &nbsp; &nbsp; &nbsp; &lt;div id=&quot;browerCourseDiv&quot;&gt;<span style="white-space:pre"> </span><br>
<span style="white-space:pre"></span>&lt;/div&gt;<br>
</div>
<div><br>
</div>
<div><br>
</div>
<div>换句话说,你的页面至少要有</div>
<div><br>
</div>
<div><br>
</div>
<div><pre name="code" class="html">        &lt;div id=&quot;browerCourseDiv&quot;&gt;	
		&lt;/div&gt;
        &lt;!-- 浏览的 --&gt;
        &lt;div class=&quot;nav page browerNav text align-right padding-top-25  padding-bottom-30&quot; id=&quot;browerNavigation&quot;&gt;
        &lt;/div&gt; </pre><br>
这几行代码,就已经具备了可以承载分页信息的基础代码</div>
<div><br>
</div>
<div><br>
</div>
<div><span style="white-space:pre"></span>$(document).ready(function(){<br>
<span style="white-space:pre"></span>//分页<br>
<span style="white-space:pre"></span>$(function(){<br>
<span style="white-space:pre"></span>$(&quot;.nav.page&quot;).initPage('${result.pages }','${result.pageNum}','${result.pageSize}','');<br>
<span style="white-space:pre"></span>});<br>
<br>
<br>
<span style="white-space:pre"></span>});<span style="white-space:pre"> </span><br>
<span style="white-space:pre"></span></div>
<div>
<div>你需要在页面开始的时候初始化分页信息,这样在页面加载后,就会执行方法向后台请求数据,请求到的数据,就会异步加载到这个指定id的div内</div>
<div>result就是你后台通过request.setAttribute或者map.put到页面的分页信息数据,具体请查看pageInfo类</div>
<br>
</div>
<div>这样子就可以直接具备分页信息了</div>
<div><br>
</div>
<div>非常的简单就可以做到了</div>
<div><br>
</div>
<div><br>
</div>
<div>2,如果是需要异步加载的</div>
<div><br>
</div>
<div>可以再页面加载后,就自动调用function</div>
<div>..........</div>
<div>&lt;script&gt;<br>
$(function(){<span style="white-space:pre"> </span><br>
<span style="white-space:pre"></span>initCourseList();<br>
<br>
<br>
<span style="white-space:pre"></span><br>
})<br>
&lt;/script&gt;<br>
&lt;/head&gt;<br>
</div>
<div><br>
</div>
<div>函数的框架如下</div>
<div><pre name="code" class="html">//初始化tab页面列表
function initCourseList(tabId){//tabId是参数,你可以传递也可以不传递,也可以在此处传递多个参数
	
	//自定义的一些参数,如果需要的话
	
	function initPage(pageNum,obj){		
	
	var loadPageCount = 0;//加载页面次数
	var _pageNum = 1;
	
	
	
	_pageNum = pageNum;//这个一定要有的,向后台请求的时候需要带着页码
	var _html=&#39;&#39;;

	$.ajax({
	   type: &quot;POST&quot;,
	   url: root+&quot;/web/userCenter/xxxxxxx.do&quot;,
	   data: {

			&quot;pageNum&quot; : _pageNum,
			&quot;tabId&quot;:tabId,
			&quot;userId&quot;:userId</pre><pre name="code" class="html">

	   		},
	   async:false,
	   success: function(result){
		   loadPageCount++;
		   if(result.courseList.length&gt;0){
			   

				   $.each(result.courseList, function(index, Item){
					  
					  
					   _html += &#39;&lt;div class=&quot;fabu_a list&quot;&gt;&#39;
					   		 +&#39;&lt;ul&gt;&#39;
					   		 +&#39;&lt;li class=&quot;fabu_a_title&quot;&gt;&#39;
&lt;span style=&quot;white-space:pre&quot;&gt;							&lt;/span&gt;...........</pre><pre name="code" class="html">&lt;span style=&quot;white-space:pre&quot;&gt;						&lt;/span&gt;//此处根据你的返回列表数据,动态的拼接成一段html&lt;span style=&quot;white-space:pre&quot;&gt;	&lt;/span&gt;..........
				
		            
	
				   });
				   

			   if(result.pageInfo.pageNum){
				   $(obj).buildPage(result.pageInfo.pageNum,result.pageInfo.pageSize,result.pageInfo.pages);	
			   }; 
			   
	   
			   
		   }else{

			    _html=&#39;&#39;;
			    //如果没有返回数据,或者列表为空,你可能需要有一些提示信息,在此处拼接
		   
			   $(obj).html(&quot;&quot;);
			   $(obj).buildPage(0,10,0);
		   }

</pre><pre name="code" class="html">&lt;span style=&quot;white-space:pre&quot;&gt;		&lt;/span&gt;//这个是把生成的html动态的加载到这个空的div内
&lt;span style=&quot;white-space:pre&quot;&gt;		&lt;/span&gt;$(&quot;#browerCourseDiv&quot;).html(_html);&#160;
		   
	   

	   },
	   error:function()
	   {
		   alert(&quot;出错&quot;);
	   }
});


};

}
</pre><br>
<br>
</div>
<div><br>
</div>
<div>后台在处理这个请求的时候,如果有页码信息,设置成页码指定的&#20540;,如果没有的话,就是默认第一页了</div>
<div>PageHelper.startPage(pageNum, Constant.PAGE_FIVE_NUM);<br>
</div>
<div><br>
</div>
<div>这样子就完成了这样一个过程</div>
<div><br>
</div>
<div>简单的说就是:</div>
<div>后台有根据pagehelper处理分页,把列表以及页面的信息(页面大小,当前页码等)返回到页面</div>
<div><br>
</div>
<div>页面只需要</div>
<div>引入js文件</div>
<div>有一个分页div以及一个用于存放拼接后的html的空的div</div>
<div><br>
</div>
<div>页面加载后就执行方法,用于加载数据</div>
<div>这样就可以了</div>
<p></p>
   
</div>




<!-- Baidu Button BEGIN -->




<div class="bdsharebuttonbox tracking-ad" style="float: right;" data-mod="popu_172">
<a href="#" class="bds_more" data-cmd="more" style="background-position:0 0 !important; background-image: url(http://bdimg.share.baidu.com/static/api/img/share/icons_0_16.png?v=d754dcc0.png) !important"></a>
<a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"  style="background-position:0 -52px !important"></a>
<a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"style="background-position:0 -104px !important"></a>
<a href="#" class="bds_tqq" data-cmd="tqq" title="分享到腾讯微博"style="background-position:0 -260px !important"></a>
<a href="#" class="bds_renren" data-cmd="renren" title="分享到人人网"style="background-position:0 -208px !important"></a>
<a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"style="background-position:0 -1612px !important" ></a>
</div>
<script>window._bd_share_config = { "common": { "bdSnsKey": {}, "bdText": "", "bdMini": "1", "bdMiniList": false, "bdPic": "", "bdStyle": "0", "bdSize": "16" }, "share": {} }; with (document) 0[(getElementsByTagName('head')[0] || body).appendChild(createElement('script')).src = 'http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion=' + ~(-new Date() / 36e5)];</script>
<!-- Baidu Button END -->

   <link rel="stylesheet" href="http://static.blog.csdn.net/css/blog_detail.css" />

    
<!--172.16.140.12-->

<!-- Baidu Button BEGIN -->
<script type="text/javascript" id="bdshare_js" data="type=tools&amp;uid=1536434" ></script>
<script type="text/javascript" id="bdshell_js"></script>
<script type="text/javascript">
    document.getElementById("bdshell_js").src = "http://bdimg.share.baidu.com/static/js/shell_v2.js?cdnversion=" + Math.ceil(new Date()/3600000)
</script>
<!-- Baidu Button END -->

 

        <div id="digg" ArticleId="50176273" >
            <dl id="btnDigg" class="digg digg_disable"  onclick="btndigga();">
               
                 <dt>顶</dt>
                <dd>0</dd>
            </dl>
           
              
            <dl id="btnBury" class="digg digg_disable"  onclick="btnburya();">
              
                  <dt>踩</dt>
                <dd>0</dd>               
            </dl>
            
        </div>
     <div class="tracking-ad" data-mod="popu_222"><a href="javascript:void(0);" >&nbsp;</a>   </div>
    <div class="tracking-ad" data-mod="popu_223"> <a href="javascript:void(0);" >&nbsp;</a></div>
    <script type="text/javascript">
                function btndigga() {
                    $(".tracking-ad[data-mod='popu_222'] a").click();
                }
                function btnburya() {
                    $(".tracking-ad[data-mod='popu_223'] a").click();
                }
            </script>

   <ul class="article_next_prev">
                <li class="prev_article"><span  onclick="_gaq.push(['_trackEvent','function', 'onclick', 'blog_articles_shangyipian']);location.href='/noteless/article/details/50148705';">上一篇</span><a href="/noteless/article/details/50148705" onclick="_gaq.push(['_trackEvent','function', 'onclick', 'blog_articles_shangyipian'])">ajax异步上传文件,ajax提交表单中的文件到后台解析</a></li>
                <li class="next_article"><span onclick="_gaq.push(['_trackEvent','function', 'onclick', 'blog_articles_xiayipian']);location.href='/noteless/article/details/50250993';">下一篇</span><a href="/noteless/article/details/50250993" onclick="_gaq.push(['_trackEvent','function', 'onclick', 'blog_articles_xiayipian'])">页面内滚动条局部滚动分页div滚动事件 滚动分页 异步滚动分页 ajax滚动</a></li>
    </ul>

    <div style="clear:both; height:10px;"></div>


        <div class="similar_article"  style="display:none">
                <h4>我的同类文章</h4>
                <div class="similar_c"style="margin:20px 0px 0px 0px">
                    <div class="similar_c_t">
                                <label class="similar_cur">
                                    <span  style="cursor:pointer"  onclick="GetCategoryArticles('5997821','noteless','foot','50176273');">mybatis<em>（1）</em></span>
                                </label>
                                <label class="">
                                    <span  style="cursor:pointer"  onclick="GetCategoryArticles('5997827','noteless','foot','50176273');">js<em>（2）</em></span>
                                </label>
                                <label class="">
                                    <span  style="cursor:pointer"  onclick="GetCategoryArticles('5997871','noteless','foot','50176273');">ajax<em>（2）</em></span>
                                </label>
                    </div>
                   
                    <div class="similar_wrap tracking-ad" data-mod="popu_141"  style="max-height:195px;">
                        <a href="http://blog.csdn.net" style="display:none">http://blog.csdn.net</a>
                        <ul class="similar_list fl">                          
                        </ul>

                        <ul class="similar_list fr">                           
                        </ul>
                    </div>
                </div>
            </div>    
    <script  type="text/javascript">
        $(function () {
            GetCategoryArticles('5997821', 'noteless','foot','50176273');
        });
    </script>
      
</div>

     <div>
    <ins data-revive-zoneid="206" data-revive-id="8c38e720de1c90a6f6ff52f3f89c4d57"></ins> 
          </div>

<div id="suggest"></div>
         <script  language="javascript" type='text/javascript'>     
             $(function(){
                 $.get("/noteless/svc/GetSuggestContent/50176273",function(data){
                     $("#suggest").html(data);
                 });     
             });             
         </script>  


<style>
.blog-ass-articl dd {
color: #369;
width: 99%; /*修改行*/
float: left;
overflow: hidden;
font: normal normal 12px/23px "SimSun";
height: 23px;
margin: 0;
padding: 0 0 0 10px;
margin-right: 30px;
background: url(http://static.blog.csdn.net/skin/default/images/blog-dot-red3.gif) no-repeat 0 10px;
}
</style>

 <link rel="stylesheet" href="http://static.blog.csdn.net/css/replace.css"/>
<div id="relate" data-mod="popu_218"  class="tracking-ad">
        <div class="relate_t">
            <h3><span>参考知识库</span></h3>
        </div>
        <div class="relate_c">
        </div>
</div>
 

<dl class="blog-ass-articl" id="res-relatived" > 
    <div class="embody embody_b" id="libkeyparent"  style="display:none">
            <span class="embody_t">更多资料请参考：</span>
            <div class="embody_c" id="libkey"></div>
    </div>


     <dt><span>猜你在找</span></dt>    


   


    <div id="adCollege" style="width: 42%;float: left;"> 
        <script src="http://csdnimg.cn/jobreco/job_reco.js" type="text/javascript"></script> 
        <script type="text/javascript">
            csdn.position.showEdu({
                sourceType: "blog",
                searchType: "detail",
                searchKey: "50176273",
                username: "",
                recordcount: "5",
                containerId: "adCollege" //容器DIV的id。 
            });
        </script> 
    </div>  

    
     <div id="res"  data-mod="popu_36"  class="tracking-ad" style="width: 42%;float: left;margin-right: 30px;"></div>
   
</dl>


<script type="text/javascript">
    $(function () {
        setTimeout(function () {
            var searchtitletags = '一站式分页解决方案:后台分页PageHelper使用,页面分页,异步ajax分页pageutils.js' + ',' + $("#tags").html();
            searchService({
                index: 'blog',
                query: searchtitletags,
                from: 5,
                size: 5,
                appendTo: '#res',
                url: 'recommend',
                his: 2,
                client: "blog_cf_enhance",
                tmpl: '<dd style="background:url(http://static.blog.csdn.net/skin/default/images/blog-dot-red3.gif) no-repeat 0 10px;"><a href="#{ url }" title="#{ title }" strategy="#{ strategy }">#{ title }</a></dd>'
            });
        }, 500);
    });    

 </script>  

    <div id="ad_cen">        
                      <ins data-revive-zoneid="199" data-revive-id="8c38e720de1c90a6f6ff52f3f89c4d57"></ins>
    </div>  

<div class="comment_class">
    <div id="comment_title" class="panel_head">
        <span class="see_comment">查看评论</span><a name="comments"></a></div>
    <div id="comment_list">
    </div>
    <div id="comment_bar">
    </div>
    <div id="comment_form">
    </div>
    <div class="announce">
        * 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场<a name="reply"></a><a name="quote"></a></div>
</div>

<script type="text/javascript">
    var fileName = '50176273';
    var commentscount = 0;
    var islock = false
</script>
<script type="text/javascript" src="http://static.blog.csdn.net/scripts/comment.js"></script>
    <div id="ad_bot">
    </div>
<div id="report_dialog">
</div>

<div id="d-top"  style="bottom:60px;">

        <a id="quick-reply" class="btn btn-top q-reply" title="快速回复" style="display:none;">
            <img src="http://static.blog.csdn.net/images/blog-icon-reply.png" alt="快速回复">
        </a>    

    <a id="d-top-a" class="btn btn-top backtop"  style="display: none;" title="返回顶部" onclick="_gaq.push(['_trackEvent','function', 'onclick', 'blog_articles_huidaodingbu'])" style="">         
         <img src="http://static.blog.csdn.net/images/top.png" alt="TOP">
    </a>
</div>
<script type="text/javascript">
    $(function ()
    {
        $("#ad_frm_0").height("90px");
        
        setTimeout(function(){
            $("#ad_frm_2").height("200px");
        },1000);    
    });
  
</script>
<style type="text/css">
    .tag_list
    {
        background: none repeat scroll 0 0 #FFFFFF;
        border: 1px solid #D7CBC1;
        color: #000000;
        font-size: 12px;
        line-height: 20px;
        list-style: none outside none;
        margin: 10px 2% 0 1%;
        padding: 1px;
    }
    .tag_list h5
    {
        background: none repeat scroll 0 0 #E0DBD3;
        color: #47381C;
        font-size: 12px;
        height: 24px;
        line-height: 24px;
        padding: 0 5px;
        margin: 0;
    }
    .tag_list h5 a
    {
        color: #47381C;
    }
    .classify
    {
        margin: 10px 0;
        padding: 4px 12px 8px;
    }
    .classify a
    {
        margin-right: 20px;
        white-space: nowrap;
    }
</style>


<div class="tag_list" style="display:none"></div>
  <script  language="javascript" type='text/javascript'>     
      $(function(){
              setTimeout(function(){
                  $.get("/noteless/svc/GetTagContent",function(data){
                      $(".tag_list").html(data).show();
                  });     
              });
          },500);                       
 </script> 


<div id="pop_win" style="display:none ;position: absolute; z-index: 10000; border: 1px solid rgb(220, 220, 220); top: 222.5px; left: 630px; opacity: 1; background: none 0px 0px repeat scroll rgb(255, 255, 255);">
    
</div>
<div id="popup_mask"></div>
<style>
    #popup_mask
    {
        position: absolute;
        width: 100%;
        height: 100%;
        background: #000;
        z-index: 9999;
        left: 0px;
        top: 0px;
        opacity: 0.3;
        filter: alpha(opacity=30);
        display: none;
    }

</style>




<script type="text/javascript">
    $(function(){
        setTimeout(function(){
            $(".comment_body:contains('回复')").each(function(index,item){
                var u=$(this).text().split('：')[0].toString().replace("回复","")
                var thisComment=$(this);
                if(u)
                {
                    $.getJSON("https://passport.csdn.net/get/nick?callback=?", {users: u}, function(a) {
                        if(a!=null&&a.data!=null&&a.data.length>0)
                        {
                            nick=a.data[0].n; 
                            if(u!=nick)
                            {
                                thisComment.text(thisComment.text().replace(u,nick));  
                            }
                        }       
                    });  
                }
            });         

        },200);  

        setTimeout(function(){
            $(".math").each(function(index,value){$(this).find("span").last().css("color","#fff"); })
        },5000);

        setTimeout(function(){
            $(".math").each(function(index,value){$(this).find("span").last().css("color","#fff"); })
        },10000);

        setTimeout(function(){
            $(".math").each(function(index,value){$(this).find("span").last().css("color","#fff"); })
        },15000);
        
        setTimeout(function(){
            $("a img[src='http://js.tongji.linezing.com/stats.gif']").parent().css({"position":"absolute","left":"50%"});
        },300);
    });

    function loginbox(){
        var $logpop=$("#pop_win");
        $logpop.html('<iframe src="https://passport.csdn.net/account/loginbox?service=http://static.blog.csdn.net/callback.htm" frameborder="0" height="600" width="400" scrolling="no"></iframe>');

        $('#popup_mask').css({
            opacity: 0.5,
            width: $( document ).width() + 'px',
            height:  $( document ).height() + 'px'
        });
        $('#popup_mask').css("display","block");
 
        $logpop.css( {
            top: ($( window ).height() - $logpop.height())/ 2  + $( window 
       ).scrollTop() + 'px',
            left:($( window ).width() - $logpop.width())/ 2
        } );
 
        setTimeout( function () {
            $logpop.show();
            $logpop.css( {
                opacity: 1
            } );
        }, 200 );
 
        $('#popup_mask').unbind("click");
        $('#popup_mask').bind("click", function(){
            $('#popup_mask').hide();
            var $clopop = $("#pop_win");
            $("#common_ask_div_sc").css("display","none");
            $clopop.css( {
                opacity: 0
            } );
            setTimeout( function () {
                $clopop.hide();
            }, 350 );
            return false;
        });
    }   

</script>
 <script language="javascript" type="text/javascript" src="http://ads.csdn.net/js/async_new.js"></script>      


                        <div class="clear">
                        </div>
                    </div>                   
                
            </div>
                   
           <div id="side">
               
    <div class="side">
<div id="panel_Profile" class="panel">
<ul class="panel_head"><span>个人资料</span></ul>
<ul class="panel_body profile">
<div id="blog_userface">
    <a href="http://my.csdn.net/noteless" target="_blank">
    <img src="http://avatar.csdn.net/1/9/E/1_noteless.jpg" title="访问我的空间" style="max-width:90%"/>
    </a>
    <br />
    <span><a href="http://my.csdn.net/noteless" class="user_name" target="_blank">noteless</a></span>
</div>
<div class="interact">

    <a href="javascript:void(0);" class="attent" id="span_add_follow" title="[加关注]"></a>

 <a href="javascript:void(0);" class="letter"  title="[发私信]" onclick="window.open('http://msg.csdn.net/letters/model?receiver=noteless','_blank','height=350,width=700');_gaq.push(['_trackEvent','function', 'onclick', 'blog_articles_sixin'])"></a>  
</div>
<div id="blog_medal">
                <div id="bms_box">
               </div>
</div>
<ul id="blog_rank">
    <li>访问：<span>1721次</span></li>
    <li>积分：<span>65</span> </li>    
    <li >等级： <span style="position:relative;display:inline-block;z-index:1" >
            <img src="http://c.csdnimg.cn/jifen/images/xunzhang/jianzhang/blog1.png" alt="" style="vertical-align: middle;" id="leveImg">
            <div id="smallTittle" style=" position: absolute;  left: -24px;  top: 25px;  text-align: center;  width: 101px;  height: 32px;  background-color: #fff;  line-height: 32px;  border: 2px #DDDDDD solid;  box-shadow: 0px 2px 2px rgba (0,0,0,0.1);  display: none;   z-index: 999;">
            <div style="left: 42%;  top: -8px;  position: absolute;  width: 0;  height: 0;  border-left: 10px solid transparent;  border-right: 10px solid transparent;  border-bottom: 8px solid #EAEAEA;"></div>
            积分：65 </div>
        </span>  </li>
    <li>排名：<span>千里之外</span></li>
</ul>
<ul id="blog_statistics">
    <li>原创：<span>5篇</span></li>
    <li>转载：<span>0篇</span></li>
    <li>译文：<span>0篇</span></li>
    <li>评论：<span>0条</span></li>
</ul>
</ul>
</div>


<div class="panel" id="panel_Search">
    <ul class="panel_head"><span>文章搜索</span></ul>
    <ul class="panel_body">
        <form id="frmSearch" action="http://so.csdn.net/search" class="form_search" target="_blank">
        <span><input id="inputSearch" type="text" class="blogsearch" title="请输入关键字" /></span>
        <input id="btnSubmit" type="button" value="搜索" title="search in blog" />
        <input type="hidden" name="q" id="inputQ" />
        <input type="hidden" name="t" value="blog" />
        <a id="btnSearchBlog" target="_blank"></a>
        </form>
    </ul>
</div>

<script type="text/javascript">
    $(function () {
        $("#btnSubmit").click(function () {           
            search();
        });

        $("#frmSearch").submit(function () {
            search();
            return false;
        });

        function search()
        {
            var url = "http://so.csdn.net/so/search/s.do?q=" + encodeURIComponent($("#inputSearch").val()) + "&u=" + username + "&t=blog";
            window.location.href = url;
        }   
    });
</script><div id="panel_Category" class="panel">
<ul class="panel_head"><span>文章分类</span></ul>
<ul class="panel_body">    
                 <li>
                    <a href="/noteless/article/category/5997713" onclick="_gaq.push(['_trackEvent','function', 'onclick', 'blog_articles_wenzhangfenlei']); ">java基础</a><span>(0)</span>
                </li>
                 <li>
                    <a href="/noteless/article/category/5997851" onclick="_gaq.push(['_trackEvent','function', 'onclick', 'blog_articles_wenzhangfenlei']); ">spring</a><span>(1)</span>
                </li>
                 <li>
                    <a href="/noteless/article/category/5997877" onclick="_gaq.push(['_trackEvent','function', 'onclick', 'blog_articles_wenzhangfenlei']); ">springMVC</a><span>(1)</span>
                </li>
                 <li>
                    <a href="/noteless/article/category/5997821" onclick="_gaq.push(['_trackEvent','function', 'onclick', 'blog_articles_wenzhangfenlei']); ">mybatis</a><span>(2)</span>
                </li>
                 <li>
                    <a href="/noteless/article/category/5997825" onclick="_gaq.push(['_trackEvent','function', 'onclick', 'blog_articles_wenzhangfenlei']); ">jsp&amp;html</a><span>(0)</span>
                </li>
                 <li>
                    <a href="/noteless/article/category/5997827" onclick="_gaq.push(['_trackEvent','function', 'onclick', 'blog_articles_wenzhangfenlei']); ">js</a><span>(3)</span>
                </li>
                 <li>
                    <a href="/noteless/article/category/5997881" onclick="_gaq.push(['_trackEvent','function', 'onclick', 'blog_articles_wenzhangfenlei']); ">mysql</a><span>(0)</span>
                </li>
                 <li>
                    <a href="/noteless/article/category/5997871" onclick="_gaq.push(['_trackEvent','function', 'onclick', 'blog_articles_wenzhangfenlei']); ">ajax</a><span>(3)</span>
                </li>
                 <li>
                    <a href="/noteless/article/category/5997847" onclick="_gaq.push(['_trackEvent','function', 'onclick', 'blog_articles_wenzhangfenlei']); ">工具使用(编码以及其他)</a><span>(0)</span>
                </li>
</ul>
</div><div id="panel_Archive" class="panel">
<ul class="panel_head"><span>文章存档</span></ul>
<ul class="panel_body">
<div id="archive_list">
<!--归档统计-->
<li><a href="/noteless/article/month/2016/02">2016年02月</a><span>(1)</span></li><li><a href="/noteless/article/month/2016/01">2016年01月</a><span>(1)</span></li><li><a href="/noteless/article/month/2015/12">2015年12月</a><span>(3)</span></li>
</div>
</ul>
</div>
<div id="hotarticls" class="panel">
<ul class="panel_head">
    <span>       
阅读排行    </span>
</ul>

<ul class="panel_body itemlist">
<li>
<a href="/noteless/article/details/50676395" title="动态生成的html绑定click事件没有效果不执行  click事件重复绑定问题">动态生成的html绑定click事件没有效果不执行  click事件重复绑定问题</a><span>(569)</span>
</li>
<li>
<a href="/noteless/article/details/50176273" title="一站式分页解决方案:后台分页PageHelper使用,页面分页,异步ajax分页pageutils.js">一站式分页解决方案:后台分页PageHelper使用,页面分页,异步ajax分页pageutils.js</a><span>(410)</span>
</li>
<li>
<a href="/noteless/article/details/50518472" title="springmvc+mybatis 整合 完整示例">springmvc+mybatis 整合 完整示例</a><span>(390)</span>
</li>
<li>
<a href="/noteless/article/details/50148705" title="ajax异步上传文件,ajax提交表单中的文件到后台解析">ajax异步上传文件,ajax提交表单中的文件到后台解析</a><span>(227)</span>
</li>
<li>
<a href="/noteless/article/details/50250993" title="页面内滚动条局部滚动分页div滚动事件 滚动分页 异步滚动分页 ajax滚动">页面内滚动条局部滚动分页div滚动事件 滚动分页 异步滚动分页 ajax滚动</a><span>(113)</span>
</li>
</ul>
</div>
<div id="hotarticls2" class="panel">
<ul class="panel_head"><span>评论排行</span></ul>
<ul class="panel_body itemlist">
<li>
<a href="/noteless/article/details/50148705" title="ajax异步上传文件,ajax提交表单中的文件到后台解析">ajax异步上传文件,ajax提交表单中的文件到后台解析</a><span>(0)</span>
</li>
<li>
<a href="/noteless/article/details/50176273" title="一站式分页解决方案:后台分页PageHelper使用,页面分页,异步ajax分页pageutils.js">一站式分页解决方案:后台分页PageHelper使用,页面分页,异步ajax分页pageutils.js</a><span>(0)</span>
</li>
<li>
<a href="/noteless/article/details/50250993" title="页面内滚动条局部滚动分页div滚动事件 滚动分页 异步滚动分页 ajax滚动">页面内滚动条局部滚动分页div滚动事件 滚动分页 异步滚动分页 ajax滚动</a><span>(0)</span>
</li>
<li>
<a href="/noteless/article/details/50518472" title="springmvc+mybatis 整合 完整示例">springmvc+mybatis 整合 完整示例</a><span>(0)</span>
</li>
<li>
<a href="/noteless/article/details/50676395" title="动态生成的html绑定click事件没有效果不执行  click事件重复绑定问题">动态生成的html绑定click事件没有效果不执行  click事件重复绑定问题</a><span>(0)</span>
</li>
</ul>
</div>
<div id="homepageArticles" class="panel tracking-ad" data-mod="popu_4">
<ul class="panel_head"><span>推荐文章</span></ul>
<ul class="panel_body" id="ad_commend">
<ul>
<li><a href="http://blog.csdn.net/lmj623565791/article/details/53370414" target="_blank">* Android 反编译初探 应用是如何被注入广告的</a></li>
<li><a href="http://blog.csdn.net/foruok/article/details/53500801" 
target="_blank">* 凭兴趣求职80%会失败，为什么</a></li>
<li><a href="http://blog.csdn.net/AndroidMsky/article/details/53490459" 
target="_blank">* 安卓微信自动抢红包插件优化和实现</a></li>
<li><a href="http://blog.csdn.net/poem_qianmo/article/details/53240330" target="_blank">* 【游戏设计模式】之四 《游戏编程模式》全书内容提炼总结</a></li>
<li><a href="http://blog.csdn.net/jiangwei0910410003/article/details/53404018" 
target="_blank">* 带你开发一款给Apk中自动注入代码工具icodetools(完善篇)</a></li>


</ul></ul>
</div>


    </div>
    <div class="clear">
    </div>


                 <!-- 广告位开始 --> 
                    <ins data-revive-zoneid="189" data-revive-id="8c38e720de1c90a6f6ff52f3f89c4d57"></ins> 
                <!-- 广告位结束 -->

           </div>   

            <div class="clear">
            </div>
        </div>

        

<script type="text/javascript" src="http://c.csdnimg.cn/rabbit/cnick/cnick.js"></script>
<script type="text/javascript" src="http://static.blog.csdn.net/scripts/newblog.min.js"></script>


<script type="text/javascript" src="http://medal.blog.csdn.net/showblogmedal.ashx?blogid=5577455"></script>
<script type="text/javascript" src="http://static.blog.csdn.net/scripts/JavaScript1.js"></script>

    <script type="text/javascript" src="http://passport.csdn.net/content/loginbox/login.js"></script>
<script type="text/javascript">document.write("<img src=http://counter.csdn.net/pv.aspx?id=24 border=0 width=0 height=0>");</script>
<script type="text/javascript" src="http://www.csdn.net/ui/scripts/Csdn/counter.js"></script>
<script type="text/javascript" src="http://ad.csdn.net/scripts/ad-blog.js"></script>
<script type="text/javascript">
    $(function () {
        function __get_code_toolbar(snippet_id) {
            return $("<span class='tracking-ad' data-mod='popu_167'><a href='https://code.csdn.net/snippets/"
                    + snippet_id
                    + "' target='_blank' title='在CODE上查看代码片'  style='text-indent:0;'><img src='https://code.csdn.net/assets/CODE_ico.png' width=12 height=12 alt='在CODE上查看代码片' style='position:relative;top:1px;left:2px;'/></a></span>"
                    + "<span class='tracking-ad' data-mod='popu_170'><a href='https://code.csdn.net/snippets/"
                    + snippet_id
                    + "/fork' target='_blank' title='派生到我的代码片' style='text-indent:0;'><img src='https://code.csdn.net/assets/ico_fork.svg' width=12 height=12 alt='派生到我的代码片' style='position:relative;top:2px;left:2px;'/></a></span>");
        }
        
        $("[code_snippet_id]").each(function () {
            __s_id = $(this).attr("code_snippet_id");
            if (__s_id != null && __s_id != "" && __s_id != 0 && parseInt(__s_id) > 70020) {
                __code_tool = __get_code_toolbar(__s_id);
                $(this).prev().find(".tools").append(__code_tool);
            }
        });

        $(".bar").show();
    });
</script>





    </div>
      <!--new top-->
    
    <script id="csdn-toolbar-id" btnId="header_notice_num" wrapId="note1" count="5" subCount="5" type="text/javascript" src="http://c.csdnimg.cn/public/common/toolbar/js/toolbar.js"></script>     <!--new top-->
   
    <link href="http://c.csdnimg.cn/comm_ask/css/ask_float_block.css" type="text/css" rel="stylesheet" />
    <script language='JavaScript' type='text/javascript' src='http://c.csdnimg.cn/comm_ask/js/libs/wmd.js'></script>
    <script language='JavaScript' type='text/javascript' src='http://c.csdnimg.cn/comm_ask/js/libs/showdown.js'></script>
    <script language='JavaScript' type='text/javascript' src='http://c.csdnimg.cn/comm_ask/js/libs/prettify.js'></script>
    <script language='JavaScript' type='text/javascript' src='http://c.csdnimg.cn/comm_ask/js/apps/ask_float_block.js'></script>
   

  <div id="a52b5334d" style="width: 1px; height: 1px; display: none;">
                    <script id="adJs52b5334"></script>
                    <script>document.getElementById("adJs52b5334").src = "http://ads.csdn.net/js/opt/52b5334.js?t=" + Math.random();</script>
   </div>

    <link rel="stylesheet" href="http://static.blog.csdn.net/css/blog_code.css" />
    <script type="text/javascript" src="http://static.blog.csdn.net/scripts/saveToCode.js"></script>
      <script type="text/javascript" src="//csdnimg.cn/rabbit/tracking-ad/main.js?75eacd8"></script>
</body>
</html>   
 